<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column">
      <t-rating
        class="tr-rating-form"
        ref="refComponent"
        color="#f33,#ff0,#000"
        :disable="false"
        :max="5"
        :no-reset="true"
        :readonly="false"
        size=""
        v-model="ratingModel"
        :hideLabel="false"
        label="打个分吧"
        :showText="true"
        texts="不开心,平静,小小愉悦,开心得不得了"
        :visible="true"
        required
        required-message="评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦评分是必填的哦"
        :tabIndex="2"
        labelPosition="top"
        @change="onChange"
        @click="onClick"
      />

      <t-button @click="validate">点击校验</t-button>
      <t-button @click="ratingModel = 0">改变外部值</t-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const ratingModel = ref(0);
const ratingColors = '';

// 校验
const refComponent = ref(null);
function validate() {
  refComponent.value.validate();
}
function onClick() {
  console.log('======点击');
}
function onChange(v) {
  console.log('======变更', v);
}
</script>
